<template>
	<view>
		<view class="header" style="display: flex;align-items: center;">
			<slot></slot>
			<uni-search-bar radius="100" v-model="searchValue" @confirm="comfirmSearch()" style="flex:auto">
			</uni-search-bar>
		</view>

		<view v-if="resultsList.length" class="result-container">
			<view class="result-item" v-for="(item, i) in curResultsList" @click="handleItemClicked(i)">
				<image :src="item.imgUrl" mode="aspectFill"></image>
				<view class="result-item-title">
					<text>{{item.title}}</text>
				</view>
			</view>
			
			<van-row style="width: 100%;">
				<van-col span="12" style="text-align: center;">
					<van-button type="default" @click="page--" :disabled="!hasPrev"  color="#ff007f" plain> 上一页 </van-button>
				</van-col>
				<van-col span="12" style="text-align: center;">
					<van-button type="default" @click="page++" :disabled="!hasNext"  color="#ff007f" plain> 下一页 </van-button>
				</van-col>
			</van-row>
		</view>
		
		<view v-else class="noResult">暂无搜索结果</view>
		<!-- <button type="default" @click="comfirmSearch">测试</button> -->
	</view>
</template>

<script>
	export default {
		props: {
			searchValue: {
				type: String,
				default: "咒术回战"
			},
			isAutoSea: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				resultsList: [],
				page: 0,
			}
		},
		methods: {
			async comfirmSearch() {
				console.log("SEARCH", this.searchValue)
				 this.page=0
				 uni.showLoading({
				     title: '加载中',
					 mask:true
				 });
				// todo 
				try {
					let data = await this.$http.get(this.BASEURL + 'anime/search/' + this.searchValue)
					console.log(data)
					data = data.data.map(e => {
						return {
							imgUrl: e.cover_url,
							score: e.score,
							title: e.title,
							url: e.url
						}
					})
					this.resultsList = data

				} catch (e) {
					console.log(e)
				}
				  uni.hideLoading();
			},
			handleItemClicked(i) {
				uni.navigateTo({
					url: "/pages/vidoDetail/vidoDetail" + "?url=" + this.resultsList[i].url,
				})
			},
		},
		computed: {
			curResultsList() {
				return this.resultsList.slice(this.page * 8, this.page * 8 + 8)
			},
			hasPrev() {
				return this.page > 0;
			},
			hasNext() {
				return this.resultsList.length > this.page * 8 + 8;
			}

		},
		created() {
			let self = this
			setTimeout(()=>{
				console.log(self.isAutoSea)
				if(self.isAutoSea){
					self.comfirmSearch()
				}
			},100)
			
		}
	}
</script>

<style>
	.result-container {
		margin: 0 40rpx;

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.result-item {
		width: 320rpx;
		height: 400rpx;
		background-color: #F2F6FC;
		border-radius: 10rpx;
		margin: 20rpx 0;
		overflow: hidden;
		text-align: center;
		line-height: 40rpx;

		display: flex;
		flex-direction: column;
	}

	.result-item>image {
		width: 100%;
		height: 280rpx;
	}

	.result-item-title {
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.pageButton {}

	.noResult {
		font-size: 1.3em;
		margin: 40rpx 0;
		text-align: center;
	}
</style>
